
<script src="../router/index.js"></script>
<template>
  <div class="admin">
    <el-container>
      <el-header>后台管理</el-header>
      <el-container class="el-container-body">
        <el-aside width="200px">
          <el-row class="tac">
            <el-col >
              <el-menu
                  router
                  default-active="/admin/user/list"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/admin/user/list">用户列表</el-menu-item>
                    <el-menu-item index="/admin/user/add-new">添加用户</el-menu-item>
                  </el-menu-item-group>
                  </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
<!--          <el-table :data="tableData">-->
<!--          <el-table-column prop="username" label="用户名" width="120">-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="age" label="年龄">-->
<!--          </el-table-column>-->
<!--            <el-table-column prop="sex" label="性别">-->
<!--            </el-table-column>-->
<!--        </el-table>-->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>




<style>
.el-container-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
  bottom: 0;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  bottom: 0;
}
</style>